<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chat App</title>
        <style>
            body {
                font-family: sans-serif;
                background-color: #f2f2f2;
                justify-content: center;
            }
            h1 {
                font-size: 24px;
                font-weight: bold;
                text-align: center;
            }
            form {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
            }
            label {
                margin: 0 5px;
                font-size: 16px;
                font-weight: bold;
            }
            input {
                flex: 1;
                margin: 0 5px;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 100%;
                font-size: 14px;
            }
            .wide {
                flex: 1;
            }
            button[type="submit"] {
                background-color: #4CAF50;
                color: #fff;
                border: none;
            }
            button {
                margin: 0 5px;
                padding: 8px 12px;
                background-color: transparent;
                color: #4CAF50;
                font-size: 14px;
                font-weight: bold;
                border: 2px solid #4CAF50;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s;
            }
            button[type="submit"]:hover {
                background-color: #3E8E41;
            }
            button[type="submit"]:active {
                background-color: #367C39;
            }
            button:hover {
                background-color: #4CAF50;
                color: #fff;
            }
            button:active {
                background-color: #367C39;
                color: #fff;
            }
            .cols {
                display: flex;
                flex-direction: column;
            }
            .row {
                display: flex;
                flex-direction: row;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h1>用户注册</h1>
        <form method="POST" onsubmit="return onSubmit()">
            <div class="cols">
                <div class="row">
                        <label for="username">用户名：</label>
                        <input type="text" id="username" name="username" autofocus required/>
                </div>
                <div class="row">
                    <label for="password">密码：</label>
                    <input type="password" id="password" name="password" required/>
                </div>
                <div class="row">
                    <label for="email">邮箱：</label>
                    <input type="text" id="email" name="email" required/>
                </div>
                <div class="row">
                    <label for="code">验证码：</label>
                    <input type="text" id="code" name="code"/>
                    <button onclick="return sendCode()">发送验证码</button>
                </div>
                <div class="row">
                    <button class="wide" type="submit">注册</button>
                    <button class="wide" onclick="window.location.assign('{{ url_for('login') }}')">已有账号？登录</button>
                </div>
            </div>
        </form>
    </body>
    <script>
        {% if error %}
        alert("{{ error }}");
        {% endif %}
        function onSubmit() {
            var username = document.getElementById("username").value.trim();
            if (username.length < 2) {
                alert("用户名不能少于2位");
                return false;
            }
            var email = document.getElementById("email").value.trim();
            if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
                alert("邮箱格式不正确");
                return false;
            }
            var password = document.getElementById("password").value.trim();
            if (password.length < 6) {
                alert("密码不能少于6位");
                return false;
            }
            var code = document.getElementById("code").value.trim();
            if (code.length !== 6) {
                alert("验证码必须为6位");
                return false;
            }
            document.getElementById("username").value = username;
            document.getElementById("email").value = email;
            document.getElementById("password").value = password;
            document.getElementById("code").value = code;
            return true;
        }
        function sendCode() {
            var email = document.getElementById("email").value.trim();
            if (email === '') {
                alert("请输入邮箱");
                return false;
            }
            if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
                alert("邮箱格式不正确");
                return false;
            }
            fetch({{ url_for('send_code')|tojson }}, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'email': email,
                })
            }).then(function (response) {
                return response.json();
            }).then(function (json) {
                if (json.status !== 'OK') {
                    alert("发送验证码失败：" + json.error);
                } else {
                    alert("验证码已发送，请注意查收");
                }
            });
            return false;
        }
    </script>
</html>
